<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			<div id="div01" class="one">1</div>
					<div id="div02">2</div>
					<div class="one">3</div>
					<div>4</div>
			
					
					<script>
						
						// jQuery核心对象 $
						console.log($);
						
						// 1. 测试使用jQuery设置对象内容
						$("#div01").text("你好,jQuery!")
						$("#div02").html("<a href='https://wwww.baidu.com'>百度</a>")
						
						// 2. 通过选择器找到对象
						// id选择器
						// $("#div01").text("你好,jQuery!")
						// 标签选择器			
						$("div").css("background-color","lightblue");
						// 类别选择器
						$(".one").css("background-color","red");
						
						
						
						
					</script>
					用户名:<input type="text" id="username" /><br />
					<script>
						// 3. 获取和设置对象的值
						// 不传参数，获取值，传参数就是设置值
						// 3.1 text() 文本内容设置
						console.log($("#div01").text())
						// 3.2 html() html内容设置
						// 3.3 val() 表单元素 比如输入框的值
						$("#username").val("abc")
						console.log($("#username").val())
					</script>
					
					<div id="div05" abc="aaa">aaaaa</div>
					<script>
						// 4. 获取访问对象的属性   
						// attr()  普通书信
						// prop()  有5个只读属性  如:offsetX
						
						// 提供1个参数 得到这个属性值
						console.log($("#div05").attr("abc"))
						// 提供2个参数 设置这个属性的值
						$("#div05").attr("name","bbbb");
						// 移除属性
						$("#div05").removeAttr("name")
					</script>		
					<div id="div06"></div>
					<script>
						// 5. 设置样式 .css()			
						$("#div06").css("width","50px");
						$("#div06").css("height","50px");
						$("#div06").css("background-color","greenS");
					</script>
			
			</script>
	</body>
</html>
